import styles from './index.less'
import React, { useState, useEffect, useRef } from "react";
interface thisParameterType {
    progress0to1: number,
    style?: Object,
    onProgressChange?: Function,
    dotStyle?: React.CSSProperties,
    onMouseUp?: Function,
    canClick?:boolean
}
const ProgressSlider: React.FC<thisParameterType> = ({ progress0to1 = 0,
    onProgressChange = (a: number) => { }, style = {}, dotStyle = {},canClick=true,
    onMouseUp = (b: number) => { }, }) => {
    const [progress, setProgress] = useState<number>(0)//数值为0-1，只读，通过更新播放时间来更新progress
    const [isDraging, setIsDraging] = useState<boolean>(false)
    const proContainerEle = useRef<any>(null)
    let canSetDragTrue = true
    useEffect(() => {
        if (!isDraging) {
            setProgress(progress0to1)
        }
    }, [progress0to1])
    const setDragTrue = () => {
        if (canSetDragTrue) {
            canSetDragTrue = false
            setIsDraging(true)
        }
    }
    dotStyle={...dotStyle,display:isDraging ? 'inherit':''}
    let canRun: boolean = true
    const changProgress = (tprogress: number, ms: number) => {
        if (canRun && canClick) {
            canRun = false
            if (tprogress < 0) {
                tprogress = 0
            } else if (tprogress > 1) {
                tprogress = 1
            }
            setProgress(tprogress)
            onProgressChange(tprogress)
            return setTimeout(() => {
                canRun = true
            }, ms);
        }
    }
    const onMouseDown = (event: any) => {
        try {
            event.stopPropagation();
            let tprogress = (event.clientX - proContainerEle.current.offsetLeft)
                / proContainerEle.current.offsetWidth
            setDragTrue()
            changProgress(tprogress, 20)
            window.onmousemove = (eventIn: any) => {
                tprogress = (eventIn.clientX - proContainerEle.current.offsetLeft)
                    / proContainerEle.current.offsetWidth;
                changProgress(tprogress, 20)
            };
            window.onmouseup = () => {
                if (tprogress < 0) {
                    tprogress = 0
                } else if (tprogress > 1) {
                    tprogress = 1
                }
                window.onmousemove = null
                onMouseUp(tprogress)
                setIsDraging(false)
                canSetDragTrue = true
                window.onmouseup = null
            }
        } catch (err) {
            console.error(err);
        }
    };
    return (
        <div 
        className={styles['progress-container']} 
            style={style}
            ref={proContainerEle}
            onMouseDown={(event) => onMouseDown(event)}>
            <div 
            className={styles['progress-constant']}
            >
                <span className={styles['progress-changing']}
                    style={{
                        width: `${progress * 100}%`
                    }}>
                    <span 
                    className={styles['progress-dot']}
                        style={progress === 0? {...dotStyle,backgroundColor:'rgb(177,177,177)'}:dotStyle}
                        >

                    </span>
                </span>
            </div>
        </div>
    )
}
export default ProgressSlider